<template>
    <div class="container">
       <div class="header">
           <p>宝宝</p>
           <img src="../assets/smalllogo.jpg" alt="" srcset="">
           <div class="bott">
               <span>ABC</span>
               <span>一个月</span>
            </div>
       </div>
        <div class="content_nav">
          <ul>
            <router-link tag="li" :to="item.path" v-for = "(item, index) of list" :key = "index">{{ item.name }}</router-link>
          </ul>
        </div>
        <div class="content">
            <p></p>
            <div class="con">
                <div class="p"><img src="../assets/logo.jpg" alt="" srcset=""></div>
                <div class="p"><img src="../assets/logo.jpg" alt="" srcset=""></div>
            </div>
        </div>
    </div>
</template>

<script>

import axios from 'axios'
export default {
    name:'About',
    data () {
        return {
        list: [{
            name: '云相册',
            path: '/dcim'
        }, {
            name: '成长记录',
            path: '/growth'
        }, {
            name: '成就',
            path: '/achieve'
        }, {
            name: '亲友团',
            path: ''
        }
        ],
        vodlist: []
        }
    },
}
</script>

<style scoped>
	*{
  	font-size: 14px!important;
  }
    .container{
        height: 100%;
    }
    .header{
        height: 36%;
        background: url('../assets/bb1.jpg') no-repeat;
        padding: 2%
    }
    .header p{
        width: 15%;
        height:30px;
        float: right;
        background: white;
        text-align: center;
        line-height: 30px
    }
    .header img{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 0 38%;
        /* margin-top: 8%; */
    }
    .bott{
        width: 60%;
        padding: 10% 20% 0;
        justify-content: space-between;
        display: flex;
    }
    .bott span{
        width: 33%;
        height: 30px;
        display: inline-block;
        background: white;
        text-align: center;
        line-height: 30px

    }
    .content_nav{
        padding: 0 10%;
    }
    .content_nav ul{
        display: flex;
        justify-content: space-between;
        margin: 2% 0
    }
    .content{
        padding: 0 2%;
        margin-bottom: 48px;
    }
    .content p{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #EDF3F3;
    }
    .con{
        border-left:2px solid #EDF3F3; 
        margin: 0 8px
    }
    .p{
        width: 92%;
        height: 25%;
        margin-left: 5%;
        background: #EDF3F3;
        margin-bottom: 7%;
        border-radius: 10px;
    }
    .p img{
        width: 100%;
        height: 100%;
        border: 1px solid #E9F2F1;
    }
</style>
